<template>
    <div id="echart"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
    const myechart = echarts.init(document.querySelector('#echart'));
    myechart.setOption({
        title: {
            text: '实验一中考试排行'
        },
        tooltip: {},//鼠标悬停提示
        xAxis: {
            data: ['一班', '二班', '三班', '四班', '五班'],
            type: 'category' 
        },
        yAxis: {},
        series: [
            {
                name: '优秀人数',
                type: 'bar',//柱状图

                // type: 'line',//折线图
                // smooth:'true',//平滑曲线

                // type: 'scatter',//散点图
                data: [25, 17, 35, 33, 60]
            }
        ],
        legend:{
            orient: 'vertical',
            right: 20,
            top: 'center'
        }

        //扇形图
        // series: [
        //     {
        //         name: '优秀人数',

        //         type: 'pie',
        //         data: [
        //             { value: 25, name: '一班' },
        //             { value: 17, name: '二班' },
        //             { value: 35, name: '三班' },
        //             { value: 33, name: '四班' },
        //             { value: 60, name: '五班' },
        //         ]
        //     }
        // ]
    })
    window.onresize = () => {
        myechart.resize()
    }
})
</script>
<style scoped>
#echart {
    width: 80%;
    height: 400px
}
</style>